<!DOCTYPE html>
<html>
<head th:include="_header_include::frag(~{::title},~{},~{})">
    <title>客户到访记录</title>
    <style>
        button a{color:#fff!important;}
    </style>
</head>
<body>
<div id="customerVisitRecord" class="customerVisitRecord mainPadding" style="display: none;">  
    <el-breadcrumb separator="/" class="elBreadcrumb marginB20">
        <el-breadcrumb-item>Home</el-breadcrumb-item>
        <el-breadcrumb-item>商务管理</el-breadcrumb-item>
        <el-breadcrumb-item>到访/未到访记录</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row class="marginB20">
    	<el-tabs type="card" v-model="activeName" @tab-click="handleClick" >
			<el-tab-pane label="到访记录" name="first"></el-tab-pane>
			<el-tab-pane label="未到访记录" name="second"></el-tab-pane>
		</el-tabs>
        <shiro:hasPermission name=" aggregation:visitRecord:reject">
        <el-button type="primary" @click="OpenRejectVisitRecordDialog">驳回</el-button>
        </shiro:hasPermission>
        <shiro:hasPermission name=" aggregation:visitRecord:pass">
            <el-button type="success" :disabled="btnDisabled1" @click="pass">审核通过</el-button>
        </shiro:hasPermission>
    </el-row>
    <div class="mainSearchBg">
        <div class="mainSearchFormBox">
            <el-form :inline="true"  class="demo-form-inline mainSearchForm" :model="form" ref="form">
                <el-form-item label="客户姓名:">
                    <el-input v-model="form.customerName" placeholder="请输入客户姓名"></el-input>
                </el-form-item>
                <el-form-item label="考察项目:">
                    <el-select v-model="form.projectId" placeholder="考察项目" clearable filterable>
                        <el-option
                            v-for="item in projectList"
                            :key="item.id"
                            :label="item.projectName"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="商务小组:">
                    <el-select v-model="form.busGroupId" placeholder="商务小组" clearable filterable :disabled="isSWZDisabled">
                        <el-option
                            v-for="item in businessGroupList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="到访时间:">
                    <el-date-picker
                        v-model="form.visitStartTime"
                        type="datetime"
                        placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="—" class="widthauto">
                    <el-date-picker
                        v-model="form.visitEndTime"
                        type="datetime"
                        placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>
                <el-row v-show="isShow">
                    <el-form-item label="商务经理:">
                        <el-select v-model="form.busManagerId" placeholder="商务经理" clearable filterable>
                            <el-option
                                v-for="item in busManagerList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="签约省份:">
                        <el-select v-model="form.signProvince" placeholder="签约省份" clearable filterable>
                            <el-option
                                v-for="item in proviceList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.name">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="到访有效性:">
                        <el-select v-model="form.status" placeholder="到访有效性" clearable>
                            <el-option
                                v-for="item in visitEffStatusOpt"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="是否签约:">
                        <el-select v-model="form.isSign" placeholder="是否签约" clearable>
                            <el-option
                                v-for="item in signStatusOpt"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="考察公司:">
                        <el-select v-model="form.companyId" placeholder="考察公司" clearable filterable>
                            <el-option
                                v-for="item in companyList"
                                :key="item.id"
                                :label="item.companyName"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="资源Id:">
                        <el-input v-model="form.clueId" placeholder="资源Id"></el-input>
                    </el-form-item>
                    <el-form-item label="客户联系方式:">
                        <el-input v-model="form.cusPhone" placeholder="客户联系方式"></el-input>
                    </el-form-item>
                </el-row>
                <div class="mainSearchBtnBox">
                    <el-button icon="el-icon-search" type="primary" @click="initCustomerVisitRecord" class="searchBtn">搜索</el-button>
                    <!-- <el-button type="info" class="searchBtn">取消</el-button> -->
                    <span style="color: #5c6be8;cursor: pointer;margin:0 10px;" @click="toogleClick"><span v-if="isShow">收起</span><span v-else>展开更多</span><i :class="{'greycolor paddingL6 el-icon-arrow-up':isShow,'greycolor paddingL6 el-icon-arrow-down':!isShow}"></i></span>
                </div>
            </el-form>
        </div>
        <el-row>
            <el-table
                ref="multipleTable"
                tooltip-effect="dark"
                style="width: 100%"
                border
                @selection-change="handleSelectionChange"
                v-loading="loading"
                :data="dataTable"
                >
                <el-table-column align="center" type="selection" width="55"></el-table-column>
                <el-table-column align="center" prop="serialNum" label="序号" width="55"></el-table-column>
                 <el-table-column align="center" prop="createTime" label="创建时间" width="130"></el-table-column>
                <el-table-column align="center" prop="customerName" label="客户姓名" width="130"></el-table-column>
                <el-table-column align="center" prop="cusPhone" label="联系方式" width="100"></el-table-column>
                <el-table-column align="center" prop="arrVisitCity" label="到访城市" width="120"></el-table-column>
                <el-table-column align="center" prop="vistitTime" label="到访时间" width="130"></el-table-column>
                <el-table-column align="center" prop="status" label="到访有效性" width="90">
                    <template slot-scope="scope">
                     <span v-if="scope.row.status===0">
                        驳回&nbsp;<el-button @click="reasonClick(scope.row)" type="text">驳回原因</el-button>
                         </span>
                                   <span v-else-if="scope.row.status===1">
                              待审核
                        </span>
                                  <span v-else-if="scope.row.status===2">
                             有效
                        </span> 
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="visitType" label="到访类型" :formatter="getVisitTypeText" width="80"></el-table-column>
                <el-table-column align="center" prop="visitNum" :formatter="transVisitNum" label="到访次数" width="80">
                </el-table-column>
                <el-table-column align="center" prop="isSign" label="是否签约" width="100">
                    <template slot-scope="scope">
                     <span v-if="scope.row.isSign===0">
                                否&nbsp;<el-button @click="notSignedReasonClick(scope.row)" type="text">未签约原因</el-button>
                     </span>
                     <span v-else-if="scope.row.isSign===1">
                             是
                        </span>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="companyName" label="考察公司" width="100"></el-table-column>
                <el-table-column align="center" prop="projectName" label="考察项目" width="100"></el-table-column>
                <el-table-column align="center" prop="vistitStoreTypeName" label="到访店铺类型" width="100"></el-table-column>
                <el-table-column align="center" prop="signProvince" label="预签约省份" width="100"></el-table-column>
                <el-table-column align="center" prop="signCity" label="预签约城市" width="100"></el-table-column>
                <el-table-column align="center" prop="signDistrict" label="预签约区／县" width="100"></el-table-column>                
                <el-table-column align="center" prop="businessManagerName" label="商务经理" width="120"></el-table-column>
                <el-table-column align="center" prop="businessGroupName" label="商务组" width="100"></el-table-column>
                <el-table-column align="center" prop="teleSaleName" label="电销顾问" width="120"></el-table-column>
                <el-table-column align="center" prop="accountPhone" label="电销顾问电话" width="100"></el-table-column>
                <el-table-column align="center" prop="teleGroupName" label="电销组" width="100"></el-table-column>  
            </el-table>
            <table-pagination :pager="pager" @change="initCustomerVisitRecord"></table-pagination>
        </el-row>
    </div>
    <!-- dialog -->
    <!-- 驳回处理 -->
    <el-dialog title="提示" :visible.sync="dialogFormVisible">
        <el-form :model="dialogForm" ref="dialogForm" :rules="dialogRules">            
            <div class="fs16 marginB20">确定将客户姓名{{signRecordArrTitle}} 到访记录驳回吗？</div>
            <el-form-item label="请输入驳回原因：" label-width="150px" prop="reason">
                <el-input
                    type="textarea"
                    :rows="4"
                    placeholder="请输入驳回原因"
                    maxLength="100"
                    v-model="dialogForm.reason">
                </el-input>
            </el-form-item>
            <div class="f-tar">最多100字</div>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" :disabled="btnDisabled" @click="submitDialogForm('dialogForm')">确 定</el-button>
            <el-button @click="dialogFormVisible = false" >取 消</el-button>
        </div>
    </el-dialog>
    <!-- 驳回原因 -->
    <el-dialog title="驳回原因" :visible.sync="reasonDialog">           
        <div class="fs16 marginB20" >{{rebutReason}} </div>
    </el-dialog>
    <!-- 未签约原因 -->
    <el-dialog title="未签约原因" :visible.sync="notSignedReasonDialog">           
        <div class="fs16 marginB20" >{{notSignReason}}</div>
    </el-dialog>
</div>
</body>
<!-- import Vue before Element -->
<div th:include="_footer_include :: #jsLib"></div>
<script th:inline="javascript">
/*     var projectList = [[${projectList}]];
    var busManagerList = [[${busManagerList}]];
    var proviceList = [[${proviceList}]];
    var companyList = [[${companyList}]]; */
var businessGroupList = [[${businessGroupList}]];
var ownOrgId=[[${ownOrgId}]];//商务总监商务组
</script>
<script>
  var customerVisitRecordVm =   new Vue({
        el: '#customerVisitRecord',
        data: function() {
            return {
                btnDisabled: false,
                btnDisabled1: false,
                isShow:false,
            	activeName: 'first',//tabs:到访记录
            	loading:true,
                dialogFormVisible:false,
                notSignedReasonDialog:false,
                reasonDialog:false,
                isSWZDisabled:false,
                form: {
                	projectId:'',
                	busGroupId:ownOrgId,
                	busManagerId:'',
                	signProvince:'',
                	companyId:'',
                	visitStartTime:'',
                	visitEndTime:'',
                	status:1,
                	cutomerName:'',
                	isSign:''
                },
                formLabelWidth: '150px',
                dataTable: [],
                visitEffStatusOpt: [{
                    value: 0,
                    label: '无效'
                }, {
                    value: 1,
                    label: '待审核'
                }, {
                    value: 2,
                    label: '有效'
                }],
                signStatusOpt: [{
                    value: 0,
                    label: '否'
                }, {
                    value: 1,
                    label: '是'
                }],
                recordTable:[],
                dialogForm:{
                    reason:''
                },
                dialogRules:{
                    reason: [
                        { required: true, message: '请输入驳回原因', trigger: 'blur' }
                    ]
                },
                pager:{//
                    total: 0,
                    currentPage: 1,
                    pageSize: 20,
                },
                projectList:[],
                busManagerList:[],
                businessGroupList:businessGroupList,
                proviceList:[],
                companyList:[],
                rebutReason:'',//驳回原因
                multipleSelection:[],
                signRecordArrTitle:'',
                notSignReason:'',//未签约原因
            }        	  
        },
        methods: {
            transVisitNum(row, column, cellValue, index){
                var text = "";
                if (cellValue == "1") {
                    text = "首次到访"
                }else if (cellValue == "2") {
                    text = "二次到访"
                }else{
                    text = this.toChinesNum(cellValue)+"次到访"
                }
                return text;
             },
            toChinesNum(num){
                  let changeNum = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九']; //changeNum[0] = "零"
                  let unit = ["", "十", "百", "千", "万"];
                  num = parseInt(num);
                  let getWan = (temp) => {
                      let strArr = temp.toString().split("").reverse();
                      let newNum = "";
                      for (var i = 0; i < strArr.length; i++) {
                          newNum = (i == 0 && strArr[i] == 0 ? "" : (i > 0 && strArr[i] == 0 && strArr[i - 1] == 0 ? "" : changeNum[strArr[i]] + (strArr[i] == 0 ? unit[0] : unit[i]))) + newNum;
                      }
                      return newNum;
                  }
                  let overWan = Math.floor(num / 10000);
                  let noWan = num % 10000;
                  if (noWan.toString().length < 4) noWan = "0" + noWan;
                  return overWan ? getWan(overWan) + "万" + getWan(noWan) : getWan(num);
            },
             handleClick(tab, event) {  //到访或者未到访tab切换
                if(tab.name=='first'){
                    window.location.href="/visit/visitRecord/visitRecordPage";
                }else{
                    window.location.href="/visit/visitRecord/noVisitRecordPage";
                }
             },
            submitDialogForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {

                        var param ={};
                        var rows = this.multipleSelection;
                        var idArr = new Array();
                        for(var i=0;i<rows.length;i++){
                            var curRow = rows[i];
                           idArr.push(curRow.id);
                        }
                        param.idList = idArr;
                        param.rebutReason = this.dialogForm.reason;

                        this.btnDisabled = true; 
                        axios.post('/visit/visitRecord/rejectVisitRecord', param)
                        .then(function (response) {
                            var resData = response.data;
                            if(resData.code=='0'){
                                customerVisitRecordVm.dialogForm.reason='';
                                customerVisitRecordVm.dialogFormVisible = false;
                                customerVisitRecordVm.$message({message:'操作成功',type:'success',duration:2000,onClose:function(){
                                    customerVisitRecordVm.initCustomerVisitRecord();
                                    customerVisitRecordVm.btnDisabled = false;
                                }});
                            }else{
                                customerVisitRecordVm.$message({message:resData.msg,type:'error'});
                                customerVisitRecordVm.btnDisabled = false;
                                console.error(resData);
                            }

                        })
                        .catch(function (error) {
                            customerVisitRecordVm.btnDisabled = false;
                            console.log(error);
                        }).then(function(){
                        });




                    } else {
                        return false;
                    }
                });
            },
            notSignedReasonClick(row) {//未签约原因
                // console.log(row);
                this.notSignReason=row.notSignReason;
                this.notSignedReasonDialog=true;
            },
            reasonClick(row) {//驳回原因
                // console.log(row);
                this.rebutReason =row.rebutReason;
                this.reasonDialog=true;
            },
            pass(){//审核通过
                var rows = this.multipleSelection;
                if(rows.length<1){
                    this.$message({
                       message: '请选择数据',
                       type: 'warning'
                     });
                    return;
                }
                
                var title = "";
                var idArr = new Array();
                var isPass = true;
                for(var i=0;i<rows.length;i++){
                    var curRow = rows[i];
                    if(curRow.status!=1){
                        this.$message({message:'只允许审核待审核的数据',type:'warning'});
                        isPass=false;
                        break;
                    }
                    title += "【"+curRow.serialNum+""+curRow.customerName+"】 ";
                    idArr.push(curRow.id);
                }
                if(!isPass){
                    return;
                }
            	
                this.$confirm('确定将客户姓名'+title+' 到访记录审核通过吗？', '提示', {
                    confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
                }).then(() => {
                    this.btnDisabled1 = true;
                    console.log("..................1111");
                    var param={};
                    param.idList = idArr;
                    axios.post('/visit/visitRecord/passAuditSignOrder', param)
                    .then(function (response) {
                        console.log("..................3333");
                        var resData = response.data;
                        if(resData.code=='0'){
                        	customerVisitRecordVm.$message({message:'操作成功',type:'success',duration:2000,onClose:function(){
                        		customerVisitRecordVm.initCustomerVisitRecord();
                        	}});
                        }else{
                            customerVisitRecordVm.btnDisabled1 = false;
                        	  customerVisitRecordVm.$message({message:resData.msg,type:'error'});
                        }
                    })
                    .catch(function (error) {
                        customerVisitRecordVm.btnDisabled1 = false;
                        console.log(error);
                    }).then(function(){
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消审核'
                    });          
                });
            },
            initCustomerVisitRecord(){//初始列表
            	   
                var startTime = this.form.visitStartTime;
                var endTime = this.form.visitEndTime;
                var startTimestamp = Date.parse(new Date(startTime));
               if(endTime){
                   var endTimestamp = new Date(endTime);
                    if(startTimestamp> endTimestamp){
                        this.$message({
                            message: '开始时间不能大于结束时间',
                            type: 'warning'
                          });
                        return;
                    }
               }
                 var param = this.form;
                 param.pageNum=this.pager.currentPage;
                 param.pageSize=this.pager.pageSize;
                 axios.post('/visit/visitRecord/listVisitRecord',param)
                 .then(function (response) {
                     var data =  response.data
                     if(data.code=='0'){
                        var resData = data.data;
                        customerVisitRecordVm.dataTable= resData.data;
                      //3.分页组件
                        customerVisitRecordVm.pager.total= resData.total;
                        customerVisitRecordVm.pager.currentPage = resData.currentPage;
                        customerVisitRecordVm.pager.pageSize = resData.pageSize;
                         
                     }else{
                         customerVisitRecordVm.$message({message:data.msg,type:'error'});
                         console.error(data);
                     }
                 
                 })
                 .catch(function (error) {
                      console.log(error);
                 }).then(function(){
                     customerVisitRecordVm.loading=false;
                     customerVisitRecordVm.btnDisabled1 = false;
                 });
            	
            },
            OpenRejectVisitRecordDialog(){//驳回
        	   this.signRecordArrTitle='';
               var rows = this.multipleSelection;
               if(rows.length<1){
                   this.$message({
                      message: '请选择数据',
                      type: 'warning'
                    });
                   return;
               }
               var isPass = true;
               var title = "";
               for(var i=0;i<rows.length;i++){
                   var curRow = rows[i];
                   if(curRow.status!=1){
                       this.$message({message:'只允许驳回待审核的数据',type:'warning'});
                       isPass=false;
                       break;
                   }
                   title += "【"+curRow.serialNum+""+curRow.customerName+"】";
               }
               if(!isPass){
                   return;
               }
               this.signRecordArrTitle=title;

               this.dialogFormVisible=true;
            },
            reasonClick(row) {//驳回原因
                // console.log(row);
                this.rebutReason = row.rebutReason;
                this.reasonDialog=true;
            },
            getSignShopTypeText(row, column, value, index){
                var valText="";
                if (value == 1) {
                    valText = "旗舰店";
                } else if (value == 2) {
                    valText = "创业店";
                } else if (value == 3) {
                    valText = "标准店";
                } else if (value == 5) {
                    valText = "区域代理";
                } else if (value == 6) {
                    valText = "单技术";
                }
                return valText;
            },
            getVisitTypeText(row, column, value, index){
            	var valText="";
                if(value==1){
                    valText="预约来访";
                }else if(value==2){
                    valText="慕名来访";
                }else if(value==3){
                    valText="临时来访";
                }
                return valText;
            },
            handleSelectionChange(val){
                this.multipleSelection = val;
            },
            getVisitNumText(row, column, value, index){
            	var valText="";
                if(value==1){
                    valText="首次到访";
                }else if(value==2){
                    valText="二次来访";
                }else if(value>=3){
                    valText="多次来访";
                }
                return valText;
            },
            getProjectList(){//获取projectLits 
                axios.post('/sign/signRecord/queryProjectList', {})
                .then(function (response) {
                      var result =  response.data;
                      if(result.code=='0'){
                          var table=result.data;
                          customerVisitRecordVm.projectList= table;
                      }else{
                           console.error(response); 
                      }
                      
                })
                .catch(function (error) {
                     console.log(error);
                });
             },
             queryBusManagerByOrgId(){//获取所有商务经理
                 axios.post('/sign/signRecord/queryBusManagerByOrgId', {})
                 .then(function (response) {
                       var result =  response.data;
                       if(result.code=='0'){
                           var table=result.data;
                           customerVisitRecordVm.busManagerList= table;
                       }else{
                           console.error(response);
                       }

                 })
                 .catch(function (error) {
                      console.log(error);
                 });
              },
              queryBusGroupList(){//根据组织机构Id查询所有商务经zu
                  axios.post('/organization/organization/queryBusGroupList', {})
                  .then(function (response) {
                        var result =  response.data;
                        if(result.code=='0'){
                            var table=result.data;
                            customerVisitRecordVm.businessGroupList= table;
                        }else{
                            console.error(response);
                        }

                  })
                  .catch(function (error) {
                       console.log(error);
                  });

              },
              getSignProvince(){
            	  axios.post('/visit/visitRecord/getSignProvince', {})
                  .then(function (response) {
                        var result =  response.data;
                        if(result.code=='0'){
                            var table=result.data;
                            customerVisitRecordVm.proviceList= table;
                        }else{
                            console.error(response);
                        }

                  })
                  .catch(function (error) {
                       console.log(error);
                  });
              },
              queryAllBusGroup(){
                axios.post('/aggregation/companyManager/listNoPage', {})
                .then(function (response) {
                    var result =  response.data;
                    if(result.code=='0'){
                        var table=result.data;
                        customerVisitRecordVm.companyList= table;
                    }else{
                        console.error(response);
                    }

                })
                .catch(function (error) {
                       console.log(error);
                });
            },
            initSelect(){//初始下拉框
                  this.getProjectList();
                  this.queryBusManagerByOrgId();
                  this.queryBusGroupList();
                  this.getSignProvince();
                  this.queryAllBusGroup();
            },
            toogleClick(){
                if(this.isShow){
                    this.isShow=false
                }else{
                    this.isShow=true
                }
            },

        },
        mounted(){
            document.getElementById('customerVisitRecord').style.display = 'block';
        },
        created(){
        	this.initCustomerVisitRecord();
        	this.initSelect();
          if(ownOrgId){this.isSWZDisabled= true;}//商务总监商务组筛选按钮不可点击
        }
    })
</script>
</html>